<template>
  <div class="youbody">
     <div class="slideshow">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(v,i) in newimgurla" :key="i"><img :src="v.imgurl" alt=""></van-swipe-item>
    </van-swipe>   
  </div>
  <ul class="iconlist">
    <li @click="fun()">
      <img src="../../../../public/wkcimg/threeimg/three (1).jpg" alt="">
      <p>特色餐饮</p>
    </li>
    <li>
      <img src="../../../../public/wkcimg/threeimg/three (2).jpg" alt="">
       <p>时尚购物</p>
    </li>
    <li>
      <img src="../../../../public/wkcimg/threeimg/three (3).jpg" alt="">
       <p>汽车生活</p>
    </li>
    <li>
      <img src="../../../../public/wkcimg/threeimg/three (4).jpg" alt="">
       <p>母婴亲子</p>
    </li>
    <li>
      <img src="../../../../public/wkcimg/threeimg/three (5).jpg" alt="">
       <p>休闲娱乐</p>
    </li>
    <li>
      <img src="../../../../public/wkcimg/threeimg/three (6).jpg" alt="">
       <p>家电数码</p>
    </li>
    <li>
      <img src="../../../../public/wkcimg/threeimg/three (7).jpg" alt="">
       <p>生活服务</p>
    </li>
    <li>
      <img src="../../../../public/wkcimg/threeimg/three (8).jpg" alt="">
       <p>旅游出行</p>
    </li>
  </ul>
  <div class="p1">特色商户</div>
  <div class="oneimg">
    <img src="../../../../public/wkcimg/threeimg/three (9).jpg" alt="">
  </div>
  <ul class="twoimg">
    <li><img src="../../../../public/wkcimg/threeimg/three (10).jpg" alt=""></li>
    <li><img src="../../../../public/wkcimg/threeimg/three (11).jpg" alt=""></li>
    <li><img src="../../../../public/wkcimg/threeimg/three (12).jpg" alt=""></li>
  </ul>
  <ul class="aaa">
    <li>
      <img src="../../../../public/wkcimg/threeimg/three (13).jpg" alt="">
    </li>
    <li>
      <img src="../../../../public/wkcimg/threeimg/three (14).jpg" alt="">
    </li>
  </ul>
   <div class="p1">优惠资讯</div>
   <div class="threeimg"  v-for="(v,i) in this.threeimg" :key="i">
    <img :src="v.imgurl" alt="">
   </div>
  </div>
</template>

<script>
import link from "@/api/link.js"
export default {
  data(){
   return{
     slideshowa:{},
      threeimg:{}
   }
  },
  created(){
     link("/user/wkc/slideshow").then((ok)=>{
          // console.log(ok)
          this.slideshowa=ok.data.slideshowb
          
        })
        ,
         link("/user/wkc/yinhangdata").then((ok)=>{
          // console.log(ok)
          this.threeimg=ok.data.threeimg
          
        })
  },
  computed:{
     newimgurla(){
           return this.slideshowa
        },
  }
  ,methods:{
    fun(){
      this.$router.push("/repastview")
    }
  }
}
</script>

<style scoped lang="scss">
    .youbody{
        width: 100%;
        height: 100%;
        .slideshow {
    width: 90%;
    margin: 0.1rem auto;
   
 .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 0.8rem;
    text-align: center;
    background-color: #39a9ed;
    height: 0.8rem;
    border-radius: 0.04rem;
    img{
        width: 100%;
        height: 100%;
    }
  }
}
.iconlist{
  width: 90%;
  height: 1.5rem;
  margin: 0.1rem auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  li{
    width:24%;
    height: 50%;
    font-size: 0;
    text-align: center;
    font-size: 0.16rem;
    img{
      width: 60%;
      height: 60%;
    }
  }
}
.oneimg{
  width: 90%;
  height: 1.6rem;
  margin: 0.05rem auto;
  border-radius: 0.1rem;
  img{
    width: 100%;
    height: 100%;
    border-radius: 0.1rem;
  }
}
.twoimg{
  width: 90%;
  height: 1.2rem;
  margin: auto;
  display: flex;
  justify-content: space-between;
  li{
    width: 32%;
    height: 100%;
    border-radius: 0.06rem;
    img{
      width: 100%;
      height: 100%;
      border-radius: 0.06rem;
    }
  }
}
.p1{
  width: 90%;
  height: 0.4rem;
  margin: auto;
  font-size: 0.18rem;
  font-weight: 700;
  line-height: 0.4rem;

}
.aaa{
  width: 90%;
  margin: 0.1rem auto;
  height: 1.14rem;
  display: flex;
  justify-content: space-between;
  li{
    width: 48%;
    height: 100%;
    img{
      width: 100%;
      height: 100%;
    }
  }
}
.threeimg{
  width: 90%;
  height: 0.74rem;
  margin: auto;
  margin-bottom: 0.1rem;
  img{
    width: 100%;
    height: 100%;
  }
}
    }
</style>